<!--
 * @Author: your name
 * @Date: 2021-11-17 10:01:53
 * @LastEditTime: 2022-07-05 15:13:13
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \app\src\views\el\directive\Cleave.vue
-->
<template>
  <div class="cleave">
    指令控制输入框输入格式cleave
    <el-input
      v-model="ID.value"
      placeholder="请输入"
      v-cleave="ID.options"
      @keyup.native.enter="confirm('ID')"
    />
    <el-input
      v-model="date.value"
      :placeholder="date.placeholder"
      v-cleave="date.options"
      @keyup.native.enter="confirm('date')"
    />
    <el-input
      v-model="bankCard.value"
      :placeholder="bankCard.placeholder"
      v-cleave="bankCard.options"
      @keyup.native.enter="confirm('bankCard')"
    />
  <div v-html="11111" />
  </div>
</template>

<script>
export default {
  name: "cleave",
  data() {
    return {
      ID: {
        value: "",
        options: {
          prefix: "PREFIX",
          delimiter: "-",
          blocks: [6, 6, 6],
          uppercase: true,
        },
      },
      date: {
        value: "",
        placeholder: "YYYY-MM-DD",
        options: {
          date: true,
          delimiter: "-",
          datePattern: ["Y", "m", "d"],
        },
      },
      bankCard: {
        value: "",
        options: {
          prefix: "",
          delimiter: " ",
          blocks: [4, 4, 4, 4],
          uppercase: true,
        },
      },
    };
  },
  methods: {
    confirm(key) {
      console.log(this[key].value);
    },
  },
};
</script>

<style lang="stylus" scoped></style>